$image-size: 5em;

.queue{
    &-item{
        width: 32em;
        padding: 1em;
        display: grid !important;
        opacity: 1 !important;
        gap: 1em;
        height: 5em;
        grid-template-columns: 3em $image-size 1fr;
        justify-items: center;
        align-items: center;
        &-image{
            max-height: 100%;
            max-width: 100%;
            object-fit: cover;
            border-radius: $border-radius_04;
            overflow: hidden;
            &-container {
                aspect-ratio: 1;
                overflow: hidden;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;    
                position: relative;
            }
            &-icon {
                width: 100%;
                height: 100%;
                display: grid;
                place-items: center;
                background: rgb(255 255 255 / 0.2);
                border-radius: 10px;
                .material-symbols-rounded {
                    font-size: 2em;
                }
                
            }
        }
        &-info{
            display: flex;
            flex-direction: column;
            gap: 0.2em;
            width: 100%;
        }
    }
    &-item.Mui-disabled {
        .queue-item-image,.queue-item-image-icon{
            opacity: 0.5 !important;
        }
    } 
}